import { ResultPage, List, Button, Dialog } from 'antd-mobile'
import UserInfo from './components/UserInfo'
import { useNavigate } from 'react-router-dom'
import { persistor } from '../../../store/index'
import styles from './css/me.module.css'
import { useSelector } from 'react-redux'

function Me() {
  const nav = useNavigate()
  const userinfo = useSelector((store) => store.user.info)

  const logout = () => {
    Dialog.confirm({
      content: '您确认退出登录吗？',
      title: '温馨提示',
      onConfirm() {
        persistor.purge()
        nav('/login')
      }
    })
  }

  return (
    <div className={styles.box}>
      <ResultPage
        status=""
        title={<UserInfo />}
        description=""
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <List
            style={{
              '--border-bottom': 'none',
              '--border-top': 'none'
            }}
          >
            <List.Item
              prefix={
                <svg
                  className="icon"
                  aria-hidden="true"
                  style={{ fontSize: '24px' }}
                >
                  <use xlinkHref="#icon-a-010_tongxunlulianxiren"></use>
                </svg>
              }
              onClick={() => {
                if (userinfo === null) {
                  Dialog.confirm({
                    title: '温馨提示',
                    content: '您还没有登录，是否跳转到登录页？',
                    onConfirm() {
                      nav('/login')
                    }
                  })
                  return
                }
                nav('/psg-list')
              }}
            >
              常用乘客
            </List.Item>
            <List.Item
              prefix={
                <svg
                  className="icon"
                  aria-hidden="true"
                  style={{ fontSize: '24px' }}
                >
                  <use xlinkHref="#icon-dingdan"></use>
                </svg>
              }
              onClick={() => nav('/order-list')}
            >
              我的订单
            </List.Item>
            <List.Item
              prefix={
                <svg
                  className="icon"
                  aria-hidden="true"
                  style={{ fontSize: '24px' }}
                >
                  <use xlinkHref="#icon-kefugongdanguanli"></use>
                </svg>
              }
              onClick={() => nav('/chat')}
            >
              客服中心
            </List.Item>
          </List>
        </ResultPage.Card>

        {userinfo !== null && (
          <div className={styles.btns}>
            <Button
              block
              color="warning"
              shape="rounded"
              onClick={logout}
            >
              退出登录
            </Button>
          </div>
        )}
      </ResultPage>
    </div>
  )
}

export default Me
